<template>
  <view class="template-preferred tn-safe-area-inset-bottom">
    <!-- 顶部横幅区域 -->
    <view class="top-banner">
      <text class="banner-text">活动</text>
    </view>
    
    <!-- 活动分类栏（固定定位） -->
    <view class="activity-categories fixed">
      <view class="category-list tn-flex">
        <view v-for="(item, index) in statusCategories" :key="index" 
          class="category-item tn-flex-col-center justify-center"
          @click="filterByStatus(item.value)">
          <view class="category-name" :class="{active: currentStatus === item.value}">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    
    <view class="" v-if="current==0">
      <!-- 活动列表区域 -->
      <view class="activity-list tn-margin">
        <view class="list-header tn-flex tn-flex-row-between tn-margin-bottom-sm items-center">
          <view class="header-title tn-text-bold tn-text-lg">吉林农科院校友会活动</view>
          <view class="header-actions tn-flex">
         <!-- 布局切换按钮（使用 icon-qiehuan 图标） -->
         <view class="layout-switch tn-flex items-center bg-gray-100 tn-radius px-2 py-1 mr-2" @click="toggleLayout">
           <!-- 替换为自定义的切换图标 icon-qiehuan -->
           <text class="iconfont icon-qiehuan" :class="{active: listLayout === 'list'}"></text>
         </view>
		 <view class="kong" ></view>
            <view class="header-filter tn-flex tn-flex-row-center" @click="showFilter = !showFilter">
              <text class="tn-margin-right-xs">筛选</text>
              <text class="tn-icon-filter tn-text-sm"></text>
            </view>
          </view>
        </view>
        
        <!-- 筛选面板 -->
        <view class="filter-panel tn-bg-white tn-radius tn-padding-sm" v-if="showFilter">
          <view class="filter-item tn-margin-bottom-sm">
            <view class="filter-label tn-text-sm tn-color-gray">活动类型</view>
            <view class="filter-options tn-flex">
              <view class="option-item" :class="{active: typeFilter === item.value}" 
                v-for="(item, index) in typeOptions" :key="index"
                @click="typeFilter = item.value">
                {{ item.label }}
              </view>
            </view>
          </view>
        </view>
        
        <!-- 单列表格 -->
        <view class="activity-items list-layout" v-if="listLayout === 'list'">
          <view v-for="(item, index) in filteredActivities" :key="index" 
            class="activity-item tn-bg-white tn-radius tn-margin-bottom-sm tn-shadow-sm"
            @click="tn('/circlePages/details', {id: item.id})">
            <view class="item-image full-width">
              <image :src="item.coverImage" mode="aspectFill" class="cover-image"></image>

            <!-- 单列表格中的标签 -->
            <!-- 修改后（正确） -->
            <view :class="[
              'activity-tag',
              item.status === 'ongoing' ? 'tag-ongoing' : '',
              item.status === 'upcoming' ? 'tag-upcoming' : '',
              item.status === 'ended' ? 'tag-ended' : ''
            ]">
              {{ item.status === 'ongoing' ? '活动中' : item.status === 'upcoming' ? '未开始' : '已结束' }}
            </view>

            </view>
            <view class="item-info tn-padding-sm">
              <view class="info-title tn-text-bold tn-text-base tn-margin-bottom-xs">{{ item.title }}</view>
              <view class="info-meta tn-flex tn-flex-row-between tn-text-xs tn-color-gray">
                <view class="meta-date">
                  <text class="tn-icon-calendar tn-margin-right-xs"></text>
                  {{ item.dateRange }}
                </view>
                <view class="meta-location">
                  <text class="tn-icon-map tn-margin-right-xs"></text>
                  {{ item.location }}
                </view>
              </view>
              <view class="info-stats tn-flex tn-flex-row-between tn-margin-top-xs">
                <view class="stats-participants tn-text-xs tn-color-gray">
                  <text class="tn-icon-people tn-margin-right-xs"></text>
                  {{ item.participantCount }}人报名
                </view>
                <view class="stats-category tn-bg-gray--light tn-round-sm tn-padding-xs tn-text-xs">
                  {{ item.categoryName }}
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 双列表格 -->
        <view class="activity-items grid-layout tn-flex tn-flex-wrap" v-if="listLayout === 'grid'">
          <view v-for="(item, index) in filteredActivities" :key="index" 
            class="grid-item tn-bg-white tn-radius tn-margin-bottom-sm tn-shadow-sm"
            @click="tn('/circlePages/details', {id: item.id})">
            <view class="grid-image-container full-width">
              <image :src="item.coverImage" mode="aspectFill" class="grid-image"></image>

              <!-- 双列表格中的标签 -->
              <!-- 修改后（正确） -->
              <view :class="[
                'activity-tag',
                item.status === 'ongoing' ? 'tag-ongoing' : '',
                item.status === 'upcoming' ? 'tag-upcoming' : '',
                item.status === 'ended' ? 'tag-ended' : ''
              ]">
                {{ item.status === 'ongoing' ? '活动中' : item.status === 'upcoming' ? '未开始' : '已结束' }}

              </view>
            </view>
            <view class="grid-info tn-padding-sm">
              <view class="grid-title tn-text-bold tn-text-sm tn-margin-bottom-xs line-clamp-2">{{ item.title }}</view>
              <view class="grid-meta tn-text-xs tn-color-gray">
                <view class="meta-date tn-margin-bottom-xs">
                  <text class="tn-icon-calendar tn-margin-right-xs"></text>
                  {{ item.dateRange }}
                </view>
                <view class="meta-location">
                  <text class="tn-icon-map tn-margin-right-xs"></text>
                  {{ item.location }}
                </view>
              </view>
              <view class="grid-category tn-bg-gray--light tn-round-sm tn-padding-xs tn-text-xs tn-margin-top-xs inline-block">
                {{ item.categoryName }}
              </view>
            </view>
          </view>
        </view>
        
        <!-- 空状态提示 -->
        <view class="empty-state tn-text-center tn-padding-xl tn-color-gray" v-if="filteredActivities.length === 0">
          <text class="tn-icon-empty-data tn-text-5xl tn-block tn-margin-bottom-sm"></text>
          <text>暂无相关校友会活动</text>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more tn-text-center tn-margin tn-padding" v-if="activities.length >= pageSize && filteredActivities.length > 0">
          <tn-loading :loading="loading" size="28" :text="loading ? '加载中...' : '加载更多'"></tn-loading>
        </view>
      </view>
    </view>
    
    <!-- 其他标签页内容 -->
    <view class="" v-if="current==1">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-activity tn-color-gray--disabled" ></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">我参与的校友会活动</view>
      </view>
    </view>
    
    <view class="" v-if="current==2">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-favorite tn-color-gray--disabled" ></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">我收藏的校友会活动</view>
      </view>
    </view>
    
    <view class="" v-if="current==3">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-clock tn-color-gray--disabled" ></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">历史校友会活动</view>
      </view>
    </view>
    
    <view class="" v-if="current==4">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-create tn-color-gray--disabled" ></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">发起校友会活动</view>
      </view>
    </view>
    
    <view class="" v-if="current==5">
      <view class="tn-margin-top tn-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}"> 
        <view class="tn-text-center" style="font-size: 180rpx;padding-top: 15vh;">
          <text class="tn-icon-settings tn-color-gray--disabled" ></text>
        </view>
        <view class="tn-text-center tn-color-gray tn-text-base">校友会活动设置</view>
      </view>
    </view>
    
    <view class='tn-tabbar-height'></view>
  </view>
</template>

<script>
  export default {
    name: 'Preferred',
    data() {
      return {
        current: 0,
        listLayout: 'list', // 默认单列
        scrollList: [
          {name: '校友会活动', count: '12'},
          {name: '我的参与'},
          {name: '我的收藏'},
          {name: '历史活动'},
          {name: '发起活动'},
          {name: '活动设置'}
        ],
        statusCategories: [
          {value: 'all', name: '全部'},
          {value: 'upcoming', name: '未开始'},
          {value: 'ongoing', name: '活动中'},
          {value: 'ended', name: '已结束'}
        ],
        currentStatus: 'all',
        activities: [
          {
            id: 1,
            title: '2024届校友返校日活动',
            coverImage: '/static/hd1.png',
            dateRange: '2024-06-15至2024-06-16',
            location: '吉林农科院东校区',
            participantCount: 238,
            status: 'upcoming',
            categoryId: 1,
            categoryName: '返校活动'
          },
          {
            id: 2,
            title: '农业科技行业校友交流会',
            coverImage: '/static/hd6.png',
            dateRange: '2024-05-20至2024-05-20',
            location: '学院学术报告厅',
            participantCount: 156,
            status: 'ongoing',
            categoryId: 2,
            categoryName: '行业交流'
          },
          {
            id: 3,
            title: '校友企业校园招聘专场',
            coverImage: '/static/hd7.jpg',
            dateRange: '2024-04-10至2024-04-10',
            location: '学院体育馆',
            participantCount: 320,
            status: 'ended',
            categoryId: 3,
            categoryName: '招聘求职'
          },
          {
            id: 4,
            title: '校友会奖学金颁奖仪式',
            coverImage: '/static/hd8.jpg',
            dateRange: '2024-09-30至2024-09-30',
            location: '学院大礼堂',
            participantCount: 89,
            status: 'upcoming',
            categoryId: 4,
            categoryName: '表彰活动'
          },
          {
            id: 5,
            title: '校友捐赠图书角揭幕活动',
            coverImage: '/static/hd1.png',
            dateRange: '2024-03-25至2024-03-25',
            location: '学院图书馆',
            participantCount: 62,
            status: 'ended',
            categoryId: 5,
            categoryName: '公益活动'
          }
        ],
        showFilter: false,
        typeFilter: 'all',
        pageSize: 5,
        loading: false,
        typeOptions: [
          {label: '全部', value: 'all'},
          {label: '返校活动', value: 1},
          {label: '行业交流', value: 2},
          {label: '招聘求职', value: 3},
          {label: '表彰活动', value: 4},
          {label: '公益活动', value: 5}
        ]
      }
    },
    computed: {
      filteredActivities() {
        return this.activities.filter(activity => {
          if (this.currentStatus !== 'all' && activity.status !== this.currentStatus) {
            return false;
          }
          if (this.typeFilter !== 'all' && activity.categoryId !== this.typeFilter) {
            return false;
          }
          return true;
        });
      }
    },
    methods: {
      tabChange(index) {
        this.current = index;
      },
      filterByStatus(status) {
        this.currentStatus = status;
        this.showFilter = false;
      },
      toggleLayout() {
        this.listLayout = this.listLayout === 'list' ? 'grid' : 'list';
      },
      getTagText(status) {
        switch(status) {
          case 'ongoing': return '活动中';
          case 'upcoming': return '未开始';
          case 'ended': return '已结束';
          default: return '';
        }
      },
      getTagClass(status) {
        switch(status) {
          case 'ongoing': return 'activity-tag tag-ongoing';
          case 'upcoming': return 'activity-tag tag-upcoming';
          case 'ended': return 'activity-tag tag-ended';
          default: return 'activity-tag';
        }
      },
      loadMore() {
        if (this.loading) return;
        
        this.loading = true;
        setTimeout(() => {
          const newActivities = this.activities.slice(0, 3).map(item => ({
            ...item,
            id: item.id + this.activities.length,
            title: `${item.title}（加场）`
          }));
          
          this.activities = [...this.activities, ...newActivities];
          this.loading = false;
        }, 1000);
      },
      tn(url, params = {}) {
        const query = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
        const fullUrl = query ? `${url}?${query}` : url;
        
        uni.navigateTo({
          url: fullUrl
        });
      }
    },
    onReachBottom() {
      if (this.current === 0) {
        this.loadMore();
      }
    }
  }
</script>

<style lang="scss" scoped>
	/* App.vue 的 style 中 */
	@import url("./iconfont.css");
  .template-preferred {
    background-color: #F7F9FC;
    padding-top: 250rpx; /* 顶部横幅(88rpx) + 分类栏(88rpx)的总高度 */
  }
  
  /* 顶部横幅样式 */
  .top-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
      padding-top: calc(env(safe-area-inset-top) + 130rpx); 
  }
  
  .banner-text {
    color: ＃000000;
    font-size: 36rpx;
    font-weight: 600;
	
  }
  
  /* 活动分类栏样式（重点优化下边框） */
  .activity-categories.fixed {
    position: fixed;
    top: 88rpx;
    left: 0;
    width: 100%;
    height: 88rpx;
    background-color: #fff;
    /* 下边框优化：增加粗细并添加虚影效果 */
    border-bottom: 2rpx solid #f0f0f0; /* 稍粗的边框，颜色更浅 */
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 轻微的下阴影，增强层次感 */
    padding: 0 20rpx;
    box-sizing: border-box;
    z-index: 99;
    display: flex;
    align-items: center;
	  padding-top: calc(env(safe-area-inset-top) + 140rpx);
	    padding-bottom: 20rpx;
  }
  
  .category-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .category-item {
    flex: none;
    text-align: center;
    padding: 0 24rpx;
    margin: 0;
  }
  
  .category-name {
    font-size: 28rpx;
    color: #666;
    position: relative;
    padding-bottom: 8rpx;
    transition: color 0.2s;
  }
  
  .category-name.active {
    color: rgb(22, 122, 70);
    font-weight: 500;
  }
  
  .category-name.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30rpx;
    height: 6rpx;
    background-color:rgb(22, 122, 70);
    border-radius: 3rpx;
  }
  
  .tn-tabbar-height {
    min-height: 120rpx;
    height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  }
  
  /* 列表头部样式 */
  .list-header {
    align-items: center;
  }
  
  .header-title {
    color: #333;
  }
  
  .header-actions {
    align-items: center;
  }
  
  /* 布局切换按钮 */
  .layout-switch {
    background-color: #F0F2F5;
    border-radius: 6rpx;
  }
  
  .layout-switch text {
    color: #666;
    font-size: 24rpx;
  }
  
  .layout-switch text.active {
    color: rgb(22, 122, 70);
    font-weight: 500;
  }
  
  /* 图标与文字间距 */
  .mr-1 {
    margin-right: 6rpx;
  }
  
  .ml-2 {
    margin-left: 12rpx;
  }
  
  .text-xs {
    font-size: 22rpx;
  }
  
  /* 筛选面板样式 */
  .filter-panel {
    margin-bottom: 16rpx;
    box-shadow: 0 2rpx 8rpx rgb（50,205,50）;
  }
  
  .filter-label {
    margin-bottom: 8rpx;
  }
  
  .filter-options {
    flex-wrap: wrap;
    gap: 10rpx;
  }
  
  .option-item {
    padding: 6rpx 16rpx;
    border-radius: 18rpx;
     line-height: 1.5;
    		font-size: 26rpx;
    		text-align: center;
    background-color: rgb（50,205,50）;
    color:＃000000;
  }
  
  .option-item.active {
    background-color: RGB（124,252,0）;
    color: rgb（50,205,50）;
    font-weight: 500;
	 line-height: 1.5;
			font-size: 26rpx;
			text-align: center;
  }
  
  /* 单列表格样式 */
  .list-layout .activity-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s;
  }
  
  .list-layout .item-image.full-width {
    width: 100%;
    height: 280rpx;
    position: relative;
  }
  
  .list-layout .cover-image {
    width: 100%;
    height: 100%;
  }
  
  .list-layout .item-info {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* 双列表格样式 */
  .grid-layout {
    gap: 20rpx;
    padding: 0 4rpx;
  }
  
  .grid-item {
    width: calc(50% - 10rpx);
    display: flex;
    flex-direction: column;
  }
  
  .grid-image-container.full-width {
    width: 100%;
    height: 200rpx;
    position: relative;
  }
  
  .grid-image {
    width: 100%;
    height: 100%;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* 活动标签样式 */
  .activity-tag {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    padding: 4rpx 12rpx;
    border-radius: 16rpx;
     line-height: 1.5;
    		font-size: 26rpx;
    		text-align: center;
    font-weight: 500;
    z-index: 1; 
	line-height: 1.5;
		font-size: 26rpx;
		text-align: center;
  }
  
  .tag-ongoing {
    background-color: rgba(0, 200, 83, 0.9);
    color: white;
  }
  
  .tag-upcoming {
    background-color: rgba(0, 122, 255, 0.9);
    color: white;
  }
  
  .tag-ended {
    background-color: rgba(153, 153, 153, 0.9);
    color: white;
  }
  
  /* 空状态和加载更多样式 */
  .empty-state {
    padding: 60rpx 0;
  }
  
  .load-more {
    color: #999;
  }
  .kong {
    width: 20rpx; /* 宽度可根据需要调整，如10rpx、30rpx等 */
  }
</style>